import React from "react";
import {throttle} from '../../utils';
import {Icon} from 'antd';

/**
 * 加载公共组件
 * */
import NoData from '../../components/NoData/NoData';
/**
 * 加载图片或样式文件
 * */
import './sass/InfiniteScroll.scss';



export default class InfiniteScroll extends React.Component {
    static propTypes = {
        isLoading   : React.PropTypes.bool.isRequired,
        isEnd       : React.PropTypes.bool.isRequired,
        isNoData    : React.PropTypes.bool.isRequired,
        loadFunc    : React.PropTypes.func.isRequired
    };
    constructor(props) {
        super(props);
        this.handleScroll = throttle(this.handleScroll.bind(this), 300);
        this.state={
            loadingFlag: false
        }
    }

    componentDidMount () {
        let scrollWrap = window;
        // let scrollWrap = document.getElementById("InfiniteScroll");
        scrollWrap.addEventListener('scroll', this.handleScroll);
    }
    componentWillUnmount () {
        let scrollWrap = window;
        // let scrollWrap = document.getElementById("InfiniteScroll");
        scrollWrap.removeEventListener('scroll', this.handleScroll);
    }
    handleScroll (e) {
        const {loadFunc,isLoading, isEnd, isNoData} = this.props;
        if(!isLoading && !isEnd){
            // let scrollTop = e.target.scrollTop;
            // let offsetHeight = e.target.offsetHeight;
            // let scrollHeight = e.target.scrollHeight;
            let scrollTop = document.body.scrollTop;
            let offsetHeight = document.body.offsetHeight;
            let scrollHeight = document.body.scrollHeight;
            if(getScrollTop() + getWindowHeight() > getScrollHeight() - 200){
                this.setState({loadingFlag: true});
                // console.log('load more');
                loadFunc();
            }
        }
        //滚动条在Y轴上的滚动距离
        function getScrollTop(){
            var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
            if(document.body){
                bodyScrollTop = document.body.scrollTop;
            }
            if(document.documentElement){
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            return scrollTop;
        }
        //文档的总高度
        function getScrollHeight(){
            var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
            if(document.body){
                bodyScrollHeight = document.body.scrollHeight;
            }
            if(document.documentElement){
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            return scrollHeight;
        }
        //浏览器视口的高度
        function getWindowHeight(){
            var windowHeight = 0;
            if(document.compatMode == "CSS1Compat"){
                windowHeight = document.documentElement.clientHeight;
            }else{
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        }

    }

    render() {
        const {isLoading, isEnd, isNoData} = this.props;
        return (
            <div id="InfiniteScroll" className={this.props.className}>
                {
                    this.props.children
                }
                {
                    isLoading && <div className="loading-wrap"> <Icon type="loading"/></div>
                }
                {
                    (isEnd && !isNoData) && <div className="no-more">没有有更多了~</div>
                }
                {
                    isNoData && <NoData/>
                }
            </div>
        )
    }
}